<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Cesium.js"></script>
    <link
      href="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Widgets/widgets.css"
      rel="stylesheet"
    />
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
      body {
        margin: 0;
      }

      #cesiumContainer {
        width: 100%;
        height: 100%;
      }

      #entityInfo {
        color: #fff;
        background-color: #3d4751;
        padding: 20px;
      }

      #close-button {
        cursor: pointer;
        font-size: 20px;
        font-weight: 700;
        position: absolute;
        top: 0;
        right: 8px;
      }
    </style>
  </head>
  <body>
    <div id="cesiumContainer"></div>
    <div
      id="entityInfo"
      style="display: none; position: absolute; z-index: 1000;"
    >
      <div id="close-button">x</div>
      <h3 id="entityName"></h3>
      <p id="entityDescription"></p>
      <ul id="entityAttributes"></ul>
    </div>
    <div id="vueContainer"></div>
    <template id="content">
      <div style="position:absolute; top: 0">
        <p>
          <button @click="flyToSpace" style="padding:8px 12px;">
            视点跳转
          </button>
          <button @click="() => flyToSpace(0)" style="padding:8px 12px;">
            返回上次视点
          </button>
        </p>
        <p>
          <button @click="openSection" style="padding:8px 12px;">
            开启剖切
          </button>
          <button @click="openLabel" style="padding:8px 12px;">
            点击生成标签
          </button>
        </p>
        <p>
          <button onclick="openRain()" style="padding:8px 12px;">
            降雨
          </button>
          <button onclick="openSnow()" style="padding:8px 12px;">
            下雪
          </button>
          <button onclick="openFog()" style="padding:8px 12px;">
            大雾
          </button>
          <button onclick="removeStage()" style="padding:8px 12px;">
            清除
          </button>
        </p>
        <p>
          <button onclick="openShadow()" style="padding:8px 12px;">
            阴影
          </button>
          <button onclick="openFlexibleShadow()" style="padding:8px 12px;">
            柔性阴影
          </button>
          <div>
              <span style="color: #000;background-color: #fff;">阴影密度</span> <input type="number" value="2048" min="1" max="10000" step="1" id="shadowDensity" onchange="shadowDensityChange()">
          </div>
          <div>
              <span style="color: #000;background-color: #fff;">颜色深度</span>
              <input type="number" value="0.3" min="0.01" max="1" step="0.01" id="colorDepth" onchange="colorDepthChange()">
          </div>
        </p>
        <p>
          <button onclick="openRadar()" style="padding:8px 12px;">
            雷达
          </button>
          <button onclick="closeRadar()" style="padding:8px 12px;">
            关闭雷达
          </button>
          <div>
              <span style="color: #000;background-color: #fff;">选择颜色</span> <input type="color" value="#3289c7" id="radarColor" oninput="colorChange('radar')">
          </div>
          <div>
              <span style="color: #000;background-color: #fff;">区域半径:</span> <input type="number" value="1000" min="1" max="10000" step="1" id="radarAreaRadius" onchange="areaRadiusChange('radar')">
          </div>
          <div>
              <span style="color: #000;background-color: #fff;">duration:</span>
              <input type="number" value="3000" min="1" max="10000" step="1" id="radarDuration" onchange="durationChange('radar')">
          </div>
        </p>
        <p>
          <button onclick="circularScanningLine()" style="padding:8px 12px;">
            圆形扫描线
          </button>
          <button onclick="closeCircular()" style="padding:8px 12px;">
            关闭圆形扫描线
          </button>
          <div>
              <span style="color: #000;background-color: #fff;">选择颜色</span> <input type="color" value="#3289c7" id="circularColor" oninput="colorChange('circular')">
          </div>
          <div>
              <span style="color: #000;background-color: #fff;">区域半径:</span> <input type="number" value="300" min="1" max="10000" step="1" id="circularAreaRadius" onchange="areaRadiusChange('circular')">
          </div>
          <div>
              <span style="color: #000;background-color: #fff;">duration:</span>
              <input type="number" value="3000" min="1" max="10000" step="1" id="circularDuration" onchange="durationChange('circular')">
          </div>
        </p>
        <p>
          <button onclick="dynamicTexture()" style="padding:8px 12px;">
            动态纹理
          </button>
          <button onclick="closeDynamicTexture()" style="padding:8px 12px;">
            关闭动态纹理
          </button>
        </p>
        <p>
          <button onclick="dynamicWall('shader')" style="padding:8px 12px;">
            动态墙
          </button>
          <button onclick="dynamicWall('shader1')" style="padding:8px 12px;">
            由下到上
          </button>
          <button onclick="dynamicWall('shader2')" style="padding:8px 12px;">
            顺时针
          </button>
          <button onclick="dynamicWall('shader3')" style="padding:8px 12px;">
            逆时针
          </button>
          <button onclick="closeDynamicWall()" style="padding:8px 12px;">
            关闭动态墙
          </button>
        </p>
        <p>
          <button onclick="flowLine()" style="padding:8px 12px;">
            流动线
          </button>
          <button onclick="closeFlowLine()" style="padding:8px 12px;">
            关闭流动线
          </button>
        </p>
        <p>
          <button onclick="heatmap()" style="padding:8px 12px;">
            热力图
          </button>
          <button onclick="closeHeatmap()" style="padding:8px 12px;">
            关闭热力图
          </button>
        </p>
      </div>
    </template>
    <script src="../../config/index.js"></script>
    <script src="ac-min.js"></script>
    <!-- <script src="./heatmap.min.js"></script>
    <script src="./CesiumHeatmap.js"></script> -->
    <script src="./CesiumHeatmap/CesiumHeatmap.js"></script>
    <script>
      const { createApp, ref, onMounted, onBeforeUnmount } = Vue
      const app = createApp({
        template: `#content`,
        setup() {
          const flyToSpace = num => {
            flyToPoint(num, [116.39384613412295, 39.91640637693138])
          }
          const openSection = () => {
            section()
          }
          const openLabel = () => {
            label()
          }
          //挂载完成执行的程序
          onMounted(() => {
            // console.log(viewer.scene.canvas === viewer.canvas) //true
            // console.log(1111111, viewer.canvas)
            // console.log(1111111, viewer.sence)
          })
          //销毁组件
          onBeforeUnmount(() => {
            // vue程序销毁时，需要清理相关资源
            console.log('程序注销')
          })
          return {
            flyToSpace,
            openSection,
            openLabel
          }
        },
        // 1.2 资源销毁
        beforeDestroy() {
          // vue程序销毁时，需要清理相关资源
        }
      })
      app.mount('#vueContainer')
    </script>
  </body>
</html>
